<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 学习</title>
</head>

<body>
    <!-- DOM在实际的开发中用于获取页面的元素 -->
    <!-- 
        1.根据id获取
        2.根据标签名获取    
        3.通过HTML新增的方法获取
        4.特殊元素获取 
    -->

    <!-- 根据id获取 -->
    <div id="time">2022-5-1</div>
    <script>
        //因为我们的文档是从上往下浏览的，所以先得有标签，我们的script要写在标签的下面 , 如果放在标签的前面会获取不到为 null
        //放进去的 参数id必须是一个字符串，要加上一个引号
        //document.getElementById（）返回的是一个dom的element对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir()打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
    <ul>
        <li>段落一</li>
        <li>段落二</li>
        <li>段落三</li>
        <li>段落四</li>
        <li>段落五</li>
    </ul>
    <ol id="ol">
        <li>生僻字</li>
        <li>shengpizi</li>
        <li>生僻</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ol>
    <div class="name">
        <ul>
            <li>
                首页
            </li>
            <li>nihao </li>
        </ul>
    </div>
    <div class="name">
        <ul>
            <li>
                首页=====
            </li>
            <li>nihao ====</li>
        </ul>
    </div>
    <script>
        //document.getElementsByTagName()返回的是一个伪数组，获取元素对象的组合
        var st = document.getElementsByTagName('li'); //也要放一个数组
        console.log(st);
        console.log(st[0]);
        //如果要限定取那一个元素下的元素可以限定范围
        var ul = document.getElementsByTagName('ul');
        //console.log(ul.document.getElementsByTagName('li'));//这样是不能取到元素的，父元素必须是一个对象（必须指明是那一个元素对象）
        console.log(ul[0].getElementsByTagName('li'));
        // 也可以用id的方法来获取
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
        var h = ol.getElementsByTagName('li');
        console.log(h[0]);
        //类的选择器，getElementByClassName('')根据类名或得某些元素的集合
        var cl = document.getElementsByClassName('name'); //返回的也是一个伪类的数组
        console.log(cl);

        //h5新增了一个选择器，document.querySlector()，选择器的意思，只能选择指定选择器的第一个元素
        var qu = document.querySelector('.name ul li');
        let abc = document.querySelector('.name')
        console.log("qu", qu);
        console.log('🚀 ~ This is a result of console.log ~ ✨: ', abc);
        //如果想要全部选择，应用getElementByTagName（）或者用querySelectorAll()
        var qa = document.querySelectorAll('.name ul li');
        console.log(qa, '---');
        //获取body和HTML的方法
        //获取body
        var b = document.body;
        console.log(b);
        console.dir(b); //返回的是对象body
        //获取HTML
        var ht = document.documentElement; //规范写法，获取body和HTML的方法不同
        console.log(ht);
        console.dir(ht);
    </script>

</body>

</html>
